<!-- 答题组件 : 问题类型考虑是否用字典里的-->

<template>
  <div>
    <!-- 单选 -->
    <div v-if="type == 1">
      <!-- <span>{{ index + 1 }} </span> -->
      <span class="answer-title" v-html="title"></span>
      <div class="answer-content">
        <el-radio-group v-model="answer.content" @change="comp">
          <el-radio
            v-for="item in items"
            :key="item.prefix"
            :label="item.prefix"
            >{{ item.prefix }}
            <span v-html="item.content" class="item-content"></span>
          </el-radio>
        </el-radio-group>
      </div>
    </div>
    <!-- 多选 -->
    <div v-if="type == 2">
      <!-- <span>{{ index + 1 }} </span> -->
      <span class="answer-title" v-html="title"></span>
      <div class="answer-content">
        <el-checkbox-group v-model="answer.contentArray" @change="comp">
          <el-checkbox
            v-for="item in items"
            :key="item.prefix"
            :label="item.prefix"
            >{{ item.prefix }}、 {{ item.content }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>

    <!-- 判断 -->
    <div v-if="type == 3">
      <!-- <span>{{ index + 1 }} </span> -->
      <span class="answer-title" v-html="title"></span>
      <div class="answer-content">
        <el-radio-group @change="comp" v-model="answer.content">
          <el-radio
            v-for="item in items"
            :key="item.prefix"
            :label="item.prefix"
            >{{ item.prefix }}、
            <span v-html="item.content" class="item-content"></span>
          </el-radio>
        </el-radio-group>
      </div>
    </div>

    <!-- 填空 -->
    <div v-if="type == 5">
      <!-- <span>{{ index + 1 }} </span> -->
      <span class="answer-title" v-html="title"></span>
      <div class="answer-content">
        <el-input
          @change="comp"
          style="width: 50%"
          v-model="answer.content"
          type="textarea"
          maxlength="100"
          show-word-limit
          :rows="5"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
export default {
  name: "answer",
  props: {
    // id
    id: {
      type: Number | String,
      require: true,
    },
    // 改题目得选项数据
    items: {
      type: Array,
      require: true,
    },
    // 题目类型
    type: {
      type: String | Number,
      require: true,
    },
    // 题目类型
    title: {
      type: String,
      require: true,
    },
  },
  data() {
    return {
      answer: {
        content: "",
        contentArray: [],
      },
    };
  },
  computed: {
    ...mapGetters(["answerList"]),
  },
  methods: {
    ...mapActions(["changeAnswerItem"]),
    // 参数
    comp() {
      // 这里还要判断，比如我多选得时候，点一次我选了，点两次我取消了，这里其实就没做这题
      //  1: 组装数据
 

      this.changeAnswerItem({
        id: this.id,
        computed:
          this.answer.content.length > 0 ||
          this.answer.contentArray.toString().length > 0,
        answer: this.answer.content
          ? this.answer.content
          : this.answer.contentArray.toString(),
        // : JSON.stringify(this.answer.contentArray),

      });
          console.log(this.answerList)
    },
  },
};
</script>
